<template>
    <el-card>
        <div class="box">
            <el-avatar
                :src="userStore.avatar"
                :size="80"
                class="margin-right"
            ></el-avatar>
            <div class="content">
                <h3>{{ getTime() }} {{ userStore.username }}</h3>
                <p>one piece</p>
            </div>
        </div>
    </el-card>
    <svg-icon
        name="welcome"
        width="500px"
        height="500px"
        class="welcome"
    ></svg-icon>
</template>

<script setup lang="ts">
import useUserStore from '@/store/modules/user';
import { onMounted, ref } from 'vue';
import { getTime } from '@/utils/time.ts';
const userStore = useUserStore();
onMounted(() => {
    userStore.getUserInfo();
});
</script>

<style scoped lang="scss">
.box {
    display: flex;
    flex-direction: row;
    align-items: center;
    h3 {
        font-size: 24px;
        margin-bottom: 10px;
    }
    p {
        font-size: 16px;
        color: #999;
    }
}
.welcome {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
